<template>
  <section v-loading="loading">
    <el-row class="toolbar">
      <el-col :span="16">
        <!-- 目录 -->
        <div class="path-bar">
          <svg-icon class="icon" icon="home" v-on:click.native.prevent="goRootEvt"></svg-icon>
          <svg-icon class="icon" icon="back1" v-on:click.native.prevent="goPrevEvt"></svg-icon>
          <file-path :curr="currDir"></file-path>
          <svg-icon class="icon" icon="new-folder" v-on:click.native.prevent="newFolderEvt"></svg-icon>
        </div>
      </el-col>
      <el-col :span="8">
        <!-- 搜索 -->
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="20">
        <!-- 由这层来控制 列表显示样式 -->
        <div class="folder m-preview" style="border: 1px solid red">
          <!-- 目录清单 -->
          <div v-if="currDir.childrens" @click="goFolderEvt(child)" class="file" v-for="(child,index) in currDir.childrens" :key="index">
            <svg-icon icon="folder" width="100%" height="100%">{{child.name}}</svg-icon>
          </div>
          <!-- 文件清单 -->
          <div v-if="currDir.files" class="file" @click="openFileEvt(child)" v-for="(child,index) in currDir.files" :key="'file-'+index">
            <div :class="child.checked?'checked':'unchecked'" style="width:100%;height:100%">
              <img :src="child.uri" style="width:100%;height:100%"/>{{child.title}}
            </div>
          </div>
          <div v-if="currDir.id" class="file">
            <el-upload
              action="https://gateway.crzycn.com/publics/file/simpleUpload/client"
              :show-file-list="false"
              :before-upload="beforeUpload">
              <svg-icon icon="new-file" width="100%" height="100%">上传</svg-icon>
            </el-upload>
          </div>
        </div>
      </el-col>
      <el-col :span="4"></el-col>
    </el-row>
    <el-dialog :visible.sync="showNewFolder" title="添加目录">
      <new-folder v-on:success="newFolderSuccess" :parent="currDir" v-on:cancel="showNewFolder=false"></new-folder>
    </el-dialog>
  </section>
</template>

<script>
  import {mapGetters, mapActions} from 'vuex'
  import Vue from 'vue'
  import svgIcon from '@/common/svgIcon'
  import filePath from './subs/filePath'
  import newFolder from './subs/newFolder'

  export default {
    components: { svgIcon,filePath,newFolder },
    name: 'file-manager-index',
    props:['selImg'],
    data() {
      return {
        path:[],
        currDir:{},
        showNewFolder:false,
        loading:false
      }
    },
    computed:{
      ...mapGetters(['department']),
    },
    mounted(){
      this.init(this.selImg)
      this.loadRoot()
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      init(string){
        // let index = string.indexOf('src=')
        // let stringTmp='https://dwz.cn/UOk3qqi1'
        // let fstring = /\"(.+?)\"/.exec(string)[1]
        // console.log('看布尔值====',test)
        // console.log('看看字符串',fstring)
      },
      loadRoot(){
        this.loading=true
        this.fetch({
          name:"getRootByCompany",
          data:{companyId:this.department.companyId}
        }).then(res=>{
          Vue.set(this.currDir,'childrens',res)
          this.loading=false
        }).catch(err=>{
          console.log(err)
          this.loading=false
        })
      },
      goRootEvt(e){
        this.currDir = {}// 置空
        this.loadRoot()
      },
      goPrevEvt(e){
        this.loading=true
        // 还是需要上一级目录数据的
        let prevDirId = this.currDir.parentId
        if(prevDirId){
          this.fetch({
            name:"getDirById",
            data:{id:prevDirId}
          }).then(res=>{
            this.currDir = res
            this.loading=false
            // 加载子目录
            this.goFolderEvt(res)
          }).catch(err=>{
            console.log(err)
            this.loading=false
          })
        }else { // 没有上一级目录了
          this.loading=false
          this.goRootEvt(null)
        }
      },
      goFolderEvt(folder){
        this.loading= true
        // 设置当前目录
        console.log('当前目录:',folder)
        this.currDir = folder
        // 获取子目录
        this.fetch({name:"getDirChildren",data:{id:folder.id}})
          .then(res=>{
            Vue.set(this.currDir,'childrens',res)
            this.loading=false
          }).catch(err=>{
          console.log(err)
          this.loading=false
        })
        // 获取文件
        this.fetch({name:"getFileByDir",data:{dirId:folder.id}})
          .then(res=>{
            let imgs=res.filter((f)=>{
              return f.suffix === 'png' || f.suffix === 'jpg' ||f.suffix === 'gif'
            })
            console.log('当前图片------',imgs)
            Vue.set(this.currDir,'files',imgs)
            this.loading=false
          }).catch(err=>{
          console.log(err)
          this.loading=false
        })
      },
      openFileEvt(e){
        console.log('看下-----------',e,this.currDir)
        if(!e.checked) Vue.set(e,'checked',true)
        else e.checked = !e.checked
        this.currDir.files.forEach(dir=>{
          if(dir.id !== e.id){
            Vue.set(dir,'checked',false)
          }
        })
        // this.$message.info('还没有实现诶！咋整？')
      },
      newFolderEvt(e){
        this.showNewFolder = true
      },
      newFolderSuccess(e){
        //新建目录不要刷新了
        if(!this.currDir.childrens)
          Vue.set(this.currDir,'childrens',[])
        this.currDir.childrens.push(e)
        this.showNewFolder = false
      },
      beforeUpload(file){
        console.log('看一眼file----------',file)
        // return
        this.loading= true
        // file.name = encodeURIComponent(file.name)
        this.fetch({
          name:'simpleUploadByClent',
          data:{file,dirId:this.currDir.id},
          method:'upload'
        }).then(res=>{
          console.log(res)
          // 加入组合
          if(this.currDir.files)
            this.currDir.files.push(res)
          else
            Vue.set(this.currDir,'files',res)
          this.loading=false
        }).catch(err=>{
          console.log(err)
          this.loading=false
        })
        return false
      }
    }
  }
</script>

<style lang="scss">
  .toolbar{
    border-bottom:1px solid #ccc;
  }
  .path-bar{
    display: flex;
    flex-direction: row;
    padding: 8px 0;
  }
  .icon{
    margin:0 5px;
    cursor:pointer;
  }
  .folder{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .m-preview .file{
    width:68px;
    height:68px;
    padding:18px;
    margin:4px;
    /*border:1px solid #349234;*/
    cursor:pointer;
  }
  .checked{
    border: 2px solid #eee;
    box-shadow: 0 0 10px #eee;
  }
  .unchecked{
    /*border: 1px solid red;*/
  }
  .file{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: 1px solid red;
  }
</style>
